<template>
  <div>
    <el-button-group>
      <el-button type="primary" :icon="CirclePlus" v-auth="'CreatePosition'" @click="formVisible = true">
        新建职位
      </el-button>
      <el-button type="danger" :icon="Remove" v-auth="'DeletePosition'" @click="handleDeleteList">删除职位</el-button>
    </el-button-group>
    <x-table
      ref="refTable"
      name="职位"
      :columns="columns"
      :init-sort="{ seq: 'ascending' }"
      :data="tableData.resp.list"
      :total="tableData.resp.total"
      :loading="tableData.loading"
      @query="handleQuery"
    >
      <template #column-status="scope">
        <el-tag v-if="scope.data === 0" type="info">禁用</el-tag>
        <template v-else>启用</template>
      </template>
      <template #column-opera="scope">
        <div class="opera-col">
          <el-link
            v-if="hasFuncKey('EditPosition')"
            plain
            type="primary"
            :underline="false"
            :icon="Edit"
            @click="handleOpenEditForm(scope.row)"
          >
            <span class="text">修改</span>
          </el-link>
          <el-popconfirm
            v-if="hasFuncKey('DeletePosition')"
            :title="`确定删除[ ${scope.row.positionName} ]吗?`"
            @confirm="handleDelete([scope.row.positionId], scope.row.positionName)"
          >
            <template #reference>
              <el-link plain type="danger" :underline="false" :icon="Remove">
                <span class="text">删除</span>
              </el-link>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </x-table>
    <Form ref="refForm" v-model:visible="formVisible" @success="handleFormSuccess" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElPopconfirm, ElTag } from 'element-plus'
import { CirclePlus, Remove, Edit } from '@element-plus/icons-vue'
import { confirm, log } from '@/utils'
import { useColumn } from '@/hooks/column'
import { useAuth } from '@/hooks/auth'
import { positionApi } from '@/api/modules/system/position'
import type { Position } from '@/api/modules/system/position'
import { usePosition } from './hook'
import Form from './Form.vue'

// 获取权限钩子，用于判断column中的修改和删除按钮 是否显示
const { hasFuncKey, hasFuncKeysCount } = useAuth()

const { refTable, tableData, handleQuery, filters, handleFormatter } = usePosition()
const { columnOpera } = useColumn()
const hasCount = hasFuncKeysCount(['EditPosition', 'DeletePosition'])
const columns = [
  { prop: 'positionCode', label: '职位编号' },
  { prop: 'positionName', label: '职位名称', isGbk: true },
  { prop: 'seq', label: '顺序', search: '' },
  { prop: 'status', label: '状态', formatter: handleFormatter, filters: filters.status },
  { ...columnOpera, width: 75 * hasCount, isCreate: hasCount > 0 }
]

const refForm = ref()
const formVisible = ref(false)

// 打开修改的窗口
const handleOpenEditForm = (data: Position) => {
  formVisible.value = true
  refForm.value.setFormData(data)
}

// 新建或修改成功后的回调函数，此刷新方法必须写在table组件所在的类文件中，否则执行其方法会出错
const handleFormSuccess = () => {
  refTable.value.refresh()
}

// 删除多个
const handleDeleteList = () => {
  if (refTable.value.selection.length === 0) {
    ElMessage.warning({ message: '请至少勾选列表中的一条数据' })
    return
  }
  confirm('确定要删除职位岗位吗?', () => {
    handleDelete(
      refTable.value.selection.map((item: Position) => {
        return item.positionId
      })
    )
  })
}
// 执行删除操作
const handleDelete = (ids: string[], name = '') => {
  log.action('删除职位岗位')
  positionApi.delete(ids).then(resp => {
    if (resp.success) {
      refTable.value.refresh()
      ElMessage.success(name ? `职位岗位[ ${name} ]已删除` : `${ids.length} 个职位岗位已删除`)
    } else {
      ElMessage.error(resp.message)
    }
  })
}
</script>

<style lang="scss" scoped>
.opera-col {
  display: flex;
  justify-content: space-around;
  .text {
    padding: 0 2px;
  }
}
</style>
